<template>
  <div class="type-status-container">
    <p class="title">设备类型及状态分布</p>
    <div id="echart-div-type"></div>
    <div id="echart-div-status"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { deviceModel, deviceState } from '@/api/homePage'

export default {
  name: 'typeAndStatus',
  data() {
    return {
      chart: null,
      typeChart: null,
      data: [],
      typeData: []
    }
  },
  mounted() {
    this.doQuery()
  },
  beforeDestroy() {
    if (!this.chart || !this.typeChart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    this.typeChart.dispose()
    this.typeChart = null
  },
  methods: {
    doQuery() {
      deviceModel().then(({ data: { data } }) => {
        this.typeData = data.map(item => {
          return { value: item.count, name: item.name }
        })
        this.initTypeChart()
      })

      deviceState().then(({ data: { data } }) => {
        this.data = [
          { value: data.offline, name: '离线' },
          { value: data.online, name: '在线' },
          { value: data.sleep, name: '休眠' }
        ]
        this.initChart()
      })
    },

    initChart() {
      this.chart = echarts.init(document.getElementById('echart-div-status'))
      const option = {
        tooltip: {
          trigger: 'item',
          show: false
        },
        legend: {
          show: true,
          top: 0,
          textStyle: {
            color: '#F6FAFF',
            fontSize: 12
          }
        },
        series: [
          {
            name: 'status',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
                color: '#fff',
                formatter: '{b}\n{d}%，{c}'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ],
        color: ['#00C2FF', '#00B0BE', '#005FCF']
      }
      this.chart.setOption(option)
    },

    initTypeChart() {
      this.typeChart = echarts.init(document.getElementById('echart-div-type'))
      const option = {
        tooltip: {
          trigger: 'item',
          show: false
        },
        legend: {
          show: false
        },
        label: {
          formatter: '{b}\n{d}%，{c}',
          color: '#fff',
          backgroundColor: 'transparent',
          overflow: 'none'
        },
        labelLine: {
          length: 5,
          length2: 5,
          lineStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'type',
            type: 'pie',
            radius: '65%',
            data: this.typeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#FFB259', 'rgb(6,151,255)']
      }
      this.typeChart.setOption(option)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.type-status-container {
  position: absolute;
  width: 320px;
  height: 440px;
  top: 583px;
  left: 27px;
  background-size: 100%;
  // background: linear-gradient(180deg, rgba(7, 122, 254, 0.23) 0%, rgba(0, 94, 162, 0) 100%);
  background-image: url(../../assets/platform/leftbottom.png);

  .title {
    text-align: center;
    color: #00c2ff;
    font-size: 16px;
    height: 58px;
    line-height: 58px;
    background: linear-gradient(
      135deg,
      rgba(42, 163, 255, 0.20000000298023224) 0%,
      rgba(43, 112, 156, 0.00009999999747378752) 100%
    );
    border-bottom: 2px solid;
    border-image: radial-gradient(
        circle,
        rgba(42.5000012665987, 162.608702480793, 255, 1),
        rgba(
          28.000000230968,
          109.00000110268593,
          171.00000500679016,
          0.4000000059604645
        ),
        rgba(
          43.00000123679638,
          112.000000923872,
          156.00000590085983,
          0.10000000149011612
        )
      )
      2 2;
  }
  > div {
    height: 190px;
    width: 100%;
  }
}
</style>
